<script setup lang="ts">
import { inject } from 'vue';
import SonSonCom from './SonSonCom.vue';

interface Person {
  name: string
  age: number
}
// 子组件通过 defineProps 接收父组件传递的参数
defineProps<Person>()

// 定义子组件的回调函数
// const emits = defineEmits<{
//   // 参数1: 回调函数名称
//   // 参数n: 回传数据的类型
//   (e: 'my-event', age: number): void
// }>()

// Vue 3.3+ 新增另一种更简洁的语法
const emits = defineEmits<{
  // key: 回调函数名称
  // value: 回调函数参数类型
  'my-event': [age: number]
  'getName': [name: string]
}>()

const totalCount = inject<number>('totalCount')
</script>

<template>
  <div class="son">
    <h2>我是子组件</h2>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>provide提供的数据：{{ totalCount }}</p>
    <button @click="emits('my-event', age)">子组件触发回调函数</button>
    <button @click="emits('getName', name)">获取名字</button>
    <SonSonCom />
  </div>
</template>

<style scoped>
.son {
  border: 1px solid red;
}
</style>